import React, {
  Component,
} from 'react';
import {
  Image,
  ImageBackground,
  TouchableWithoutFeedback,
  Text,
  View,
  ToastAndroid,
} from 'react-native';
import SplashScreen from 'react-native-splash-screen';

import { connect } from 'react-redux';

import *as WeChat from 'react-native-wechat'

import _wechatConfig from '../../config/wechat.json';

import {login_wechat} from '../../actions/reglogin';

import styles from "./css/index";

class RegloginScreen extends Component {

  static navigationOptions = {
      header: null
  };

  constructor(props) {
    super(props);
    this.state = {
      uid_check_flg : false,
      bg_check_flg: false,
    }
  }

  componentWillMount(){
    let uid = global.uid;
    if(uid > 0){
      this.props.navigation.navigate('Mainpage');
    }
  }

  componentDidMount(){
    WeChat.registerApp(_wechatConfig["appId"]);
    this.state.uid_check_flg = true;
    this._splashHide();
  }

  _splashHide(){
    if(this.state.uid_check_flg = true && this.state.bg_check_flg){
      SplashScreen.hide();
    }
  }

  //微信登录
  _wxlogin() {
    let scope = 'snsapi_userinfo';
    let state = '';
    let that = this;
    WeChat.sendAuthRequest(scope, state)
      .then(responseCode => {
        login_wechat(that, responseCode.code);
      })
      .catch(err => {
        ToastAndroid.show("登录授权发生错误", ToastAndroid.SHORT);
      })
  }

  render() {
    return (
      <ImageBackground
        source={require('./img/start_login_bg.png')}
        style={styles.container}
        fadeDuration={0}
        onLoad={()=>{
          this.state.bg_check_flg = true;
          this._splashHide();
        }}
      >
        <View style={styles.button_group}>
          <TouchableWithoutFeedback
          >
            <View style={[styles.button, styles.register]}>
              <Text style={[styles.text]}>
                手机注册
                    </Text>
            </View>
          </TouchableWithoutFeedback>
          <TouchableWithoutFeedback
            onPress={() => this._wxlogin()}
          >
            <View style={[styles.button, styles.wechat_login]}>
              <Image
                source={require('./img/room_wechat_normal.png')}
                style={styles.logo}
                resizeMode="contain"
              />
              <Text style={[styles.text]}>
                微信登录
                    </Text>
            </View>
          </TouchableWithoutFeedback>
          <TouchableWithoutFeedback
            onPress={() => this.props.navigation.navigate('PhoneLogin', {transition: 'slide'})}
          >
            <Text style={[styles.text, styles.phoneLogin]}>手机号登录 ></Text>
          </TouchableWithoutFeedback>
        </View>
      </ImageBackground>
    );
  }
}

function mapStateToProps(state) {
  return {
    account_uid: state.user.uid
  }
}

export default connect(mapStateToProps)(RegloginScreen);